 <template>
  <div class="farm-contact">
      <div class="farm-contact-box">
          <div class="farm-contact-title">
              <p><span>联系方式</span></p>
              <section>最原始的自源文字大多是象形文字，即通过象物来表达事物。随着表达越来越丰富</section>
          </div>
          <div class="farm-contact-list">
              <ul>
                    <li>
                      <div>
                        <img src="../assets/images/dizhi.png" alt="">
                      </div>
                      <div>
                          <p><span>公司地址</span></p>
                          <section>中国互联网省域名市网站区666号</section>
                      </div>
                      </li>
                    <li>
                      <div>
                        <img src="../assets/images/dianhua.png" alt="">
                      </div>
                      <div>
                          <p><span>联系电话</span></p>
                          <section>010-0000-0000</section>
                      </div>
                      </li>
                    <li>
                      <div>
                        <img src="../assets/images/email.png" alt="">
                      </div>
                      <div>
                          <p><span>电子邮箱</span></p>
                          <section>电子邮箱1000000@qq.com</section>
                      </div>
                    </li>
              </ul>
          </div>
          <div style="width:1200px; margin:90px auto auto auto;">
            <hr>
          </div>
      </div>
      <div class="map">
          <div class="map-box">
              <div><img src="../assets/images/gaode.png" alt=""></div>
              <div class="form">
                  <p><span>在线留言</span></p>
                  <div>
                        <input type="text" placeholder="请输入姓名">
                  </div>
                  <div>
                        <input type="text" placeholder="请输入电话">
                  </div>
                  <div>
                        <input type="text" placeholder="请输入电话">
                  </div>
                  <div>
                        <textarea name="" id="" cols="87" rows="3" placeholder="请输入内容"></textarea>
                  </div>
                    <div class="button">
                        <a href="">提交</a>
                    </div>
              </div>
          </div>
      </div>
  </div>
 </template>
<script>
    export default {
    }
</script>
 <style scoped>
    hr{color: #ffffff}
    p{margin: 0;padding: 0;}
    .farm-contact-box{
        width: 1200px;
        margin: 70px auto;
    }
    .farm-contact-title{
        text-align: center;
    }
    .farm-contact-title p{
        font-size: 25px;
    }
    section{
        font-size: 14px;
        color: gray;
        line-height: 1.8;
    }
    .farm-contact-list{
        width: 100%;
        margin-top:50px;
    }
    .farm-contact-list ul{
        margin:0;
        padding: 0;
        display: flex;
        justify-content: space-around;
    }
    .farm-contact-list ul li{
        width: 33.33%;
        display: flex;
    }
    .farm-contact-list ul li div{
        padding-left: 50px;
    }
    .farm-contact-list p{
        font-size: 18px;
        margin-bottom: 8px;
        color: gray;
    }
    .map-box{
        width: 1200px;
        margin: auto auto 100px auto;
        display: flex;
        justify-content: space-between;
    }
    .map-box .form p{
        position: relative;
        bottom: 40px;
        text-align: center;
        font-size: 23px;
        color: black;
    }
    .map-box .form div{
        margin-bottom: 14px;   
    }
    .map-box input{
        width: 575px;
        height: 32px;
        padding-left: 10px;
        border: 1px solid #ccc;
        border-radius: 3px;
        font-size: 14px;
        transition: all .2s;
    }
    .map-box input:focus{
        border: 1px solid #33CC00;
        box-shadow: 0 0 2px #33CC00;
    }
    .map-box textarea{
        padding: 8px 0 0 10px;
        border: 1px solid #ccc;
        border-radius: 3px;
        font-size: 14px;
        transition: all .2s;
    }
    .map-box textarea:focus{
        border: 1px solid #33CC00;
        box-shadow: 0 0 2px #33CC00;
    }
    .map-box .button{
        text-align: center;
    }
    .map-box .button a{
        border-radius: 3px;
        background: #13Ae47;
        color: white;
        font-size: 15px;
        padding: 8px 277px;
    }
    
 </style>
